<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
         <#include "../static/top.ftl" >

</head>
<body>
<!-- Page Wrapper -->
<!-- In the PHP version you can set the following options from inc/config file -->
<!--
    Available classes:

    'page-loading'      enables page preloader
-->
<div id="page-wrapper">
    <!-- Preloader -->
    <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
    <!-- Used only if page preloader is enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
    <div class="preloader themed-background">
        <h1 class="push-top-bottom text-light text-center"><strong>Pro</strong>UI</h1>
        <div class="inner">
            <h3 class="text-light visible-lt-ie10"><strong>Loading..</strong></h3>
            <div class="preloader-spinner hidden-lt-ie10"></div>
        </div>
    </div>

    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animations">
               

                 <#include "../static/menu.ftl" >

        <!-- Main Container -->
        <div id="main-container">
                   
                    
                    
                    
                    <#include "../static/header.ftl" >

            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">


                <div class="content-header">
                    <h4 style="padding-left: 20px;  padding-right: 20px;">
                        Dashboard&nbsp;&nbsp;&nbsp;<#include "../static/search.ftl" ></h4>
                </div>

                <ul class="breadcrumb breadcrumb-top">
                    <li>Home</li>
                    <li><a href="#">Analysis</a></li>
                </ul>


                <!-- END Dashboard Header -->


                <div class="row">
                    <div class="col-sm-12 col-lg-12">
                        <div class="block">
                            <div class="block-title">
                                <h2><strong id="data_title"></strong></h2>

                                <div id="quick-btn-group" class="btn-group btn-group-sm">

                                </div>
                            </div>

                            <div id="data_chart"></div>
                        </div>
                    </div>
                </div>

                <div class="row">


                    <div class="col-md-12">
                        <div class="block" style="height:280px">
                            <div class="form-group col-md-3" id="areas_div">
                                <label for="">Areas</label>

                                <select class="selectpicker" id="areas_select" data-live-search="true">

                                </select>


                            </div>
                            <form action="#" class="form-inline" onsubmit="return false;">
                                <div class="form-group col-md-3">
                                    <label for="">Start Month</label>

                                    <input class="m-wrap m-ctrl-medium date-picker form-control" id="start-month"
                                           size="16"
                                           type="text" value=""><span class="add-on"><i
                                        class="icon-calendar"></i></span>


                                </div>

                                <div class="form-group col-md-3">
                                    <label for="">End Month</label>
                                    <input class="m-wrap m-ctrl-medium date-picker form-control" id="end-month"
                                           size="16"
                                           type="text" value=""><span class="add-on"><i
                                        class="icon-calendar"></i></span>
                                </div>
                                <div class="form-group col-md-1">
                                    <button type="button" id="searchBtn" class="btn btn-primary"><i
                                            class="fa fa-search fa-fw"></i> Search
                                    </button>
                                </div>
                            </form>

                        </div>

                    </div>


                </div>

            </div>
            <!-- END Page Content -->

            <!-- Footer -->
                    <#include "../static/corp.ftl" >
            <!-- END Footer -->

            <!-- END Main Container -->
        </div>
        <!-- END Page Container -->
    </div>

    <a href="#" id="to-top"><i class="fa fa-angle-double-up"></i></a>

     
         <#include "../static/footer.ftl" >
    <script type="text/javascript" src="/res1/js/jquery.pulsate.min.js"></script>
    <script>

        //查询时间暂时固定，之后修改
        var startTime = '201001';
        var endTime = '201712';
        var REQUEST = "";
        var R_TYPE = "";
        var R_PROP = "";
        var R_AREA = "110000";
        $(document).ready(function () {
            //移除菜单选中
            $(".sidebar-nav a").each(function () {
                $(this).removeClass('active');
            });
            $('#menu3').addClass('active');

            $('.date-picker').datepicker({
                //rtl: App.isRTL()
                format: 'yyyy-mm',
                autoclose: true,
                startView: 'month',
                maxViewMode: 'months',
                minViewMode: 'months'

            });

            Date.prototype.Format = function (fmt) { //author: meizz
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "H+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }

            /*
            $("#exportBtn").click(function () {
                var request = $(this).attr("attri");
                console.log(request);
                if (request == '') {
                    layer.msg("Please fill in with full details");
                    return;
                } else {
                    location.href = "/service/data/export" + request
                }

            });*/

            //地区选项框改变事件
            $("#areas_select").change(function () {
                R_AREA = $(this).val();
            });

            $("#searchBtn").click(function () {

                startTime = $("#start-month").val().replace("-", "");
                endTime = $("#end-month").val().replace("-", "");
                if (startTime == '' || endTime == '') {
                    layer.msg("Please fill in with full details");
                    return;
                }
                //var request = $("#data_select").val();
                //console.log(request);
                //console.log($("#data_select").find("option:selected").attr("attri"));

                updateExport(REQUEST);
                display(REQUEST, startTime, endTime);
            });

            var myDate = new Date();
            endTime = myDate.Format("yyyyMM");

            var key = getParam("key");
            console.log(key);
            if (typeof(key) == "undefined" || key == null || key == undefined) {
                key = "/service/data/get_month_trend/new2";
                myDate = new Date(myDate.setMonth(myDate.getMonth() - 6));
                startTime = myDate.Format("yyyyMM");
            } else {
                if (key.indexOf("month") > 0 || key.indexOf("confi") > 0) {
                    myDate = new Date(myDate.setMonth(myDate.getMonth() - 6));
                } else if (key.indexOf("year") > 0) {
                    myDate = new Date(myDate.setMonth(myDate.getMonth() - 72));
                } else {
                    myDate = new Date(myDate.setMonth(myDate.getMonth() - 12));
                }
                startTime = myDate.Format("yyyyMM");
            }

            if (key.indexOf("area") > 0) {
                REQUEST = key.substr(0, key.lastIndexOf("/"));
                R_AREA = key.substr(key.lastIndexOf("/") + 1)
            } else {
                REQUEST = key;
            }

            updateExport(REQUEST);
            console.log(startTime + "," + endTime);
            display(REQUEST, startTime, endTime);
            getAreas();

            //echarts画出的是canvas，窗口变动后需要重绘
            window.onresize = function () {
                var myChart = echarts.getInstanceByDom(document.getElementById("data_chart"));
                myChart.resize();
            }
        });

        function getAreas() {
            $.ajax({
                type: "GET",
                url: "/service/data/getAreas",
                async: false,
                success: function (res) {
                    if (res.code == "suc") {
                        var html = "";
                        var data = res.data.nodes;
                        for (var i = 0; i < data.length; i++) {
                            html = html + "<option value='" + data[i].code + "' >"
                                    + data[i].cname + "</option>";
                        }

                        $("#areas_select").html(html);
                        $("#areas_select").selectpicker("val", R_AREA);
                        document.getElementById('areas_select').style.width = (screen.width * 2 / 5) + 'px'
                    } else {
                        layer.msg('empty data')
                    }
                }
            });
        }

        function updateExport(request) {
            //var exportBtnEle = $('#exportBtn');
            //exportBtnEle.attr("attri", "");
            if (request.indexOf("month") > 0) {
                R_TYPE = "m";
            } else if (request.indexOf("year") > 0) {
                R_TYPE = "y";
            } else if (request.indexOf("quar") > 0) {
                R_TYPE = "q";
            } else {
                R_TYPE = "c";
            }
            var index = request.lastIndexOf("/") + 1;
            R_PROP = request.substr(index);

            /*
                exportBtnEle.attr("attri", "/excel/"
                        + $("#data_select").find("option:selected").attr("type")
                        + "/" + $("#data_select").find("option:selected").attr("prop")
                        + "/" + startTime + "-" + endTime);*/
            /*
            exportBtnEle.attr("attri", "/excel/"
                    + R_TYPE
                    + "/" + R_PROP
                    + "/" + startTime + "-" + endTime);*/
        }

        //快速搜索按钮
        function quick_search(request, end_time, type) {
            var myDate = new Date();
            myDate = new Date(myDate.setMonth(myDate.getMonth() - 12 * type));
            start_time = myDate.Format("yyyyMM");
            display(request, start_time, end_time);
            startTime = start_time;
            endTime = end_time;
        }

        function display(request, start_time, end_time) {
            //独立成一个方法，可以用异步方式循环做ajax请求
            ajaxRequest(request, start_time, end_time, R_AREA);
        };

        function ajaxRequest(request, start_time, end_time, area_id) {
            var quick_btn = "";
            //$("#quick-btn-group").html(quick_btn);


            if (request.indexOf("month") > 0 || request.indexOf("confiden") > 0) {
                quick_btn = "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",0.5" + ")'>近半年</button>" +
                        "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",1" + ")'>近一年</button>" +
                        "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",2" + ")'>近两年</button>" +
                        "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",3" + ")'>近三年</button>";
            } else if (request.indexOf("quar") > 0) {
                quick_btn = "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",1" + ")'>近一年</button>" +
                        "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",2" + ")'>近两年</button>" +
                        "<button class='btn btn-alt btn-primary' " +
                        "onclick='quick_search(\"" + request + "\",\"" + endTime + "\",3" + ")'>近三年</button>";
            }
            $("#quick-btn-group").html("&nbsp;&nbsp;&nbsp;" + quick_btn);
            //$("#data_chart").html('');
            document.getElementById("data_chart").style.height = '300px';

            var myChart = echarts.init(document.getElementById("data_chart"));
            myChart.showLoading();

            var realRequest = "";
            if (request.indexOf("area") > 0) {
                realRequest = request + "/" + start_time + "-" + end_time + "/" + area_id;
            } else {
                realRequest = request + "/" + start_time + "-" + end_time;
            }

            $.ajax({
                type: "GET",
                url: realRequest,
                success: function (res) {
                    myChart.hideLoading();
                    if (res.code == "suc") {
                        // 指定图表的配置项和数据
                        var json_data = res.data;

                        var x_data = [];
                        var y_data = [];
                        var y1_data = [];
                        var option;
                        var label = {};
                        var y_name = "";

                        if (json_data.length > 0) {
                            var titleEle = "#data_title";
                            $(titleEle).html(json_data[0].cn_name + " (" + json_data[0].view_name + ")");

                            if (json_data[0].unit != null) {
                                y_name = json_data[0].unit;
                            }

                            $("#areas_div").hide();
                            if (json_data[0].is_area == 1) {
                                $("#areas_div").show();
                            }

                            for (i = json_data.length - 1; i >= 0; i--) {
                                if (request.indexOf('year') != -1) {
                                    x_data.push(json_data[i].yy);
                                } else if (request.indexOf('month') != -1 || request.indexOf('confi') != -1) {
                                    x_data.push(json_data[i].ym);
                                } else {
                                    x_data.push(json_data[i].yq_name);
                                }
                                y_data.push(json_data[i].data);
                                //y1_data.push(json_data[i].yya)
                            }

                            /*
                            if (json_data.length <= 12) {
                                label = {
                                    show: true
                                    //rotate: 90
                                }
                            }*/
                        } else {
                            layer.msg('no data');
                        }
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'line'
                                },
                                confine: true
                            },
                            toolbox: {
                                feature: {
                                    myExcelExport: {
                                        show: true,
                                        title: " ",
                                        icon: "image://../res/media/image/page_excel.png",
                                        onclick: function () {
                                            location.href = "/service/data/export/excel/"
                                                    + R_TYPE
                                                    + "/" + R_PROP
                                                    + "/" + startTime + "-" + endTime;
                                        }
                                    },
                                    saveAsImage: {
                                        show: true,
                                        type: "png",
                                        name: json_data[0].cn_name + " (" + json_data[0].view_name + ")",
                                        title: " ",
                                        icon: "image://../res/media/image/picture.png"
                                    }
                                }
                            },
                            grid: {
                                containLabel: true
                            },
                            legend: {
                                show: false
                                //data: ['value', 'growth rate']
                            },
                            xAxis: {
                                name: "Time",
                                data: x_data.map(function (str) {
                                    if (str.toString().length > 5) {
                                        return str.toString().substring(2, 4) + "/" + str.toString().substring(4, 6);
                                    } else {
                                        return str.toString().substring(0, 4);
                                    }
                                }),
                                splitNumber: 3
                                //axisLabel: {interval: 0}
                            },
                            yAxis: [
                                {
                                    name: y_name,
                                    type: 'value',
                                    splitLine: false,
                                    splitNumber: 3
                                    /**
                                     max: function (value) {
                                        console.log(value)

                                        if (value.max > 0) {
                                            if (Math.abs(value.max) < 1) {
                                                return (value.max + 0.1 * value.max).toFixed(2);
                                            } else {
                                                return Math.ceil(value.max + 0.1 * value.max);
                                            }
                                        } else {
                                            if (Math.abs(value.max) < 1) {
                                                return (value.max - 0.1 * value.max).toFixed(2);
                                            } else {
                                                return Math.ceil(value.max - 0.1 * value.max);
                                            }
                                        }
                                    },
                                     min: function (value) {
                                        if (value.min < 0) {
                                            if (Math.abs(value.min) < 1) {
                                                return (value.min + 0.1 * value.min).toFixed(2);
                                            } else {
                                                return Math.floor(value.min + 0.1 * value.min);
                                            }
                                        } else {
                                            if (Math.abs(value.min) < 1) {
                                                return (value.min - 0.1 * value.min).toFixed(2);
                                            } else {
                                                return Math.floor(value.min - 0.1 * value.min);
                                            }
                                        }
                                    }
                                     **/
                                }
                                // ,
                                // {
                                //     type: 'value',
                                //     axisLabel: {
                                //         formatter: '{value}%'
                                //     },
                                //     splitLine: false
                                // }
                            ],
                            series: [
                                {
                                    name: 'value',
                                    type: 'line',
                                    data: y_data,
                                    //barMaxWidth: '60%',
                                    label: label,
                                    // label: {
                                    //     normal: {
                                    //         show: true,
                                    //         position: 'top'
                                    //     }
                                    // },
                                    lineStyle: {
                                        color: "040A2B"
                                    },
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    itemStyle: {
                                        normal: {
                                            color: '#333333'
                                        }
                                    }
                                }
                                // ,
                                // {
                                //     name: 'growth rate',
                                //     type: 'line',
                                //     yAxisIndex: 1,
                                //     data: y1_data
                                // }
                            ]
                        };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart.clear();
                        myChart.setOption(option);

                    } else {
                        console.log(res);
                    }
                }
            });
        }

        function getParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    </script>
</body>
</html>